$$slots

Posted on 2023-04-22 by

henrikvilhelmberglund

There is something called $$slots . It's an object containing keys. If they are truthy the slot exists .

A: Fallback for a
C: Fallback for c
A:
Something for a
B:
Something for b
C:
Something for c
A:
Something for a
B:
C:
Something for c
<script>
	import A from "./A.svelte";
</script>

<A />

<A>
	<div slot="a">Something for a</div>
	<div slot="b">Something for b</div>
	<div slot="c">Something for c</div>
</A>

<hr class="border-black my-4">

<A>
	<div slot="a">Something for a</div>
  <!-- note that this still says B: because passing in an empty slot still counts as something-->
	<div slot="b"></div>
	<div slot="c">Something for c</div>
</A>

<style>
</style>

For slots that are not named the variable will be $$slots.default .

It's also important to note that even if we pass in an empty slot the $$slots for that slot will be truthy (as seen above).